<template>
  <div class="user-profile">
    <Header /> <!-- 引入Header组件 -->
    <div class="container mt-5" v-if="user">
      <h1>{{ user.username }}的美食作品</h1> <!-- 显示用户的美食作品 -->
      <div class="row mt-4">
        <FoodItem v-for="food in userFoods" :key="food.id" :food="food" /> <!-- 循环展示用户的美食 -->
      </div>
      <h2 class="mt-5">个人信息</h2>
      <div class="user-info card p-3">
        <div class="head_img mb-3">
          <img :src="form.avatar || defaultAvatar" alt="Avatar" class="avatar" /> <!-- 用户头像 -->
          <div class="setting_right" @click.stop="uploadHeadImg">
            <div class="caption">更改头像</div> <!-- 更改头像按钮 -->
          </div>
          <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" /> <!-- 隐藏的文件输入，用于上传头像 -->
        </div>
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <input type="text" id="username" v-model="form.username" class="form-control" /> <!-- 用户名输入框 -->
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">邮箱</label>
          <input type="email" id="email" v-model="form.email" class="form-control" /> <!-- 邮箱输入框 -->
        </div>
        <div class="mb-3">
          <label for="avatar" class="form-label">头像URL</label>
          <input type="text" id="avatar" v-model="form.avatar" class="form-control" /> <!-- 头像URL输入框 -->
        </div>
        <button @click="updateProfile" class="btn btn-primary">更新信息</button> <!-- 更新信息按钮 -->
      </div>
    </div>
    <div class="container mt-5" v-else>
      <p>您还没有登录，请先 <router-link to="/login">登录</router-link>。</p> <!-- 未登录时的提示信息 -->
    </div>
    <Footer /> <!-- 引入Footer组件 -->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'; // 导入Vuex的mapState和mapActions
import Header from '@/components/Header.vue'; // 导入Header组件
import Footer from '@/components/Footer.vue'; // 导入Footer组件
import FoodItem from '@/components/FoodItem.vue'; // 导入FoodItem组件

export default {
  components: {
    Header, // 注册Header组件
    Footer, // 注册Footer组件
    FoodItem, // 注册FoodItem组件
  },
  data() {
    return {
      form: {
        username: '', // 用户名字段
        email: '', // 邮箱字段
        avatar: '', // 头像字段
      },
      defaultAvatar: '/src/assets/images/duojiaoyutou.jpg', // 默认头像
    };
  },
  computed: {
    ...mapState(['user', 'foods']), // 映射Vuex的状态
    userFoods() {
      return this.foods.filter(food => food.user === this.user?.username); // 过滤出当前用户的美食
    },
  },
  mounted() {
    if (this.user) {
      this.form = { ...this.user }; // 初始化表单数据
    }
  },
  methods: {
    ...mapActions(['updateUserProfile']), // 映射Vuex的actions
    uploadHeadImg() {
      this.$el.querySelector('.hiddenInput').click(); // 打开文件选择框
    },
    handleFile(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (data) => {
        this.form.avatar = data.target.result; // 读取文件内容并更新头像字段
      };
      reader.readAsDataURL(file); // 将文件读取为Data URL
    },
    updateProfile() {
      this.updateUserProfile(this.form); // 调用Vuex的action更新用户信息
      alert('信息更新成功'); // 显示更新成功提示
    },
  },
};
</script>

<style scoped>
.user-profile {
  text-align: center; /* 设置用户信息页面的文本居中对齐 */
}
.container {
  max-width: 800px; /* 设置容器的最大宽度 */
  margin: 0 auto; /* 自动水平外边距以居中对齐 */
}
.avatar {
  width: 100px; /* 设置头像的宽度 */
  height: 100px; /* 设置头像的高度 */
  border-radius: 50%; /* 设置头像为圆形 */
  object-fit: cover; /* 保持图片的长宽比 */
}
.head_img {
  position: relative; /* 相对定位 */
  display: inline-block; /* 内联块级元素 */
  cursor: pointer; /* 鼠标指针为手型 */
}
.hiddenInput {
  display: none; /* 隐藏文件输入框 */
}
.setting_right {
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部对齐 */
  right: 0; /* 右边对齐 */
  background-color: rgba(0, 0, 0, 0.5); /* 设置半透明背景色 */
  color: white; /* 设置文本颜色为白色 */
  padding: 5px 10px; /* 设置内边距 */
  border-radius: 0 0 10px 0; /* 设置边框圆角 */
}
</style>
